<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0;padding:0}
#box{width:400px;height:300px;margin:10px;margin-top:300px;padding:10px; background:red; position:relative;}
#box2{width:300px;height:200px;margin:10px;padding:10px; background:blue;position:relative;}
#box3{width:200px;height:100px; background:yellow}
</style>
<script>
window.onload=function()
{
    var oBox1=document.getElementById('box');
    var oBox2=document.getElementById('box2');
    var oBox3=document.getElementById('box3');
	
	console.log(getPos(oBox3));
};
function getPos(obj){
	var l=0;
	var t=0;
	
	while(obj){
		l+=obj.offsetLeft;
		t+=obj.offsetTop;
		
		obj=obj.offsetParent;	
		console.log(obj);
	};
	
	return {left:l, top:t};
};
</script>
</head>

<body>

<div id="box">
  <div id="box2">
      <div id="box3">
      
       
       </div>
  </div>
</div>

</body>
</html>
